<template>
	<view class="film">
		<view class="nav">
			<view class="back" @click="goback">
				<uni-icons type="back" :size="22" color="#333333"></uni-icons>
			</view>
			<view class="search-content">
				<image src="/static/index/search.png"></image>
				<input type="text" v-model="keyWord" placeholder="请输入影院名字" placeholder-class="input-placeholder" />
				<view class="search-btn" @click="onSearch">搜索</view>
			</view>
			<view class="location" @click="toCityChoose">
				<image src="/static/index/loc.png"></image>
				<view style="flex: 1;text-align: center;" class="hidden">{{movieLocation.name || movieLocation.cityName || '请选择'}}
				</view>
			</view>
		</view>



		<view class="tab">
			<view class="box">
				<view :id="index==1 ? 'select' : ''" @click="onTab(1)">热映</view>
				<view :id="index==2 ? 'select' : ''" @click="onTab(2)">影院</view>
				<view :id="index==3 ? 'select' : ''" @click="onTab(3)">即将上映</view>
			</view>
			<view class="ad" v-show="index == 2">
				<u-swiper :list="list" img-mode="aspectFit" @click="onBanner" mode="none"></u-swiper>
			</view>
		</view>
		
		<cc-pullScroolView class="pullScrollView" ref="pullScroll" :back-top="true" :pullDown="pullDown">
			<view class="film_list" v-show="index == 1 || index == 3" :id="index == 1 ? '' : 'will'">
				<!-- <view class="date" v-show="index == 3">
					<text>明天</text>
					<view>12月1日</view>
				</view> -->
				<view v-for="(item,i) in moveList" :key="item.id" @click="onFilm(item)">
					<view class="item">
						<image :src="item.pic" mode="widthFix"></image>
						<view class="substance">
							<view class="name">{{item.name}}</view>
							<view class="text">电影评分 <i>{{item.grade}}</i>
								<view class="line"></view> {{(item.like/10000).toFixed(1)}}万人想看
							</view>
							<view class="text" v-if="item.director">导演：{{item.director}}</view>
							<view class="text">主演:{{item.leading_role}}</view>
							<view class="text">上映日期：
								<uni-dateformat :date="item.publishDate" format="yyyy-MM-dd"></uni-dateformat>
							</view>
						</view>
						<view class="btn">
							<view v-if="index == 1">购票</view>
							<view v-if="index == 3" style="background: linear-gradient(90deg, #2CA6FF 0%, #218FFF 100%);">预售
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="cinema_list" v-show="index == 2">
				<view class="box">
					<!-- <view class="screen">
						<view class="select" @click="toCityChoose">
							<text>{{address.cityName || '请选择'}}</text>
							<image src="/static/search/shaixuandown.png"></image>
						</view>
						<view class="search">
							<input type="text" placeholder="请输入影院名字" v-model="keyWord">
							<view class="btn" @click="onSearch">搜索</view>
						</view>
					</view> -->
					<scroll-view :scroll-y="true" class="list">
						<view class="list_item" @click="toDetail(item)" v-for="(item,index) in cinemaList" :key="index">
							<view class="top">
								<view class="hidden">{{item.cinemaName}}</view>
								<text><i>￥{{item.downPrice}}</i>起</text>
							</view>
							<view class="bottom">
								<view class="hidden">{{item.cinemaAddress}}</view>
								<text>{{item.distanceText}}</text>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</cc-pullScroolView>

		

	</view>
</template>

<script>
	import { mapState } from 'vuex'//引入mapState
	export default {
		data() {
			return {
				index: 1,

				city: '',

				address: '',

				date: 1,

				keyWord: '', // 搜索

				moveList: [],
				cinemaList: [],

				page: 1,
				total: 0,

				list: [],
			}
		},
		watch:{
			movieLocation:function(newvalue,oldvalue){
				if(newvalue.latitude != oldvalue.latitude || newvalue.longitude != oldvalue.longitude){
					this.page = 1
					this.total = 0
					this.moveList = []
					this.cinemaList = []
					if (this.index == 1) {
						this.getMovieList(0)
					}
					if (this.index == 2) {
						this.getCinemaList()
					}
					if (this.index == 3) {
						this.getMovieList(1)
					}
					this.getCinemaList()
				}
			}
		},
		methods: {
			onBanner(e){
				uni.navigateTo({
					url: '/otherpages/film/chooseCinema?id=' + this.list[e].show_id 
				})
			},
			goback() {
				uni.navigateBack()
			},
			pullDown(pullScroll) {
				uni.showLoading()
				this.page = 1
				this.total = 0
				let i = this.index == 1 ? 0 : this.index == 3 ? 1 : 0
				this.moveList = []
				this.cinemaList = []
				this.getMovieList(i)
				this.getCinemaList()
				setTimeout(() => {
					uni.hideLoading()
					this.$refs.pullScroll.success();
				}, 300);
			},
			onTab(e) {
				this.index = e
				if (this.index == 1) {
					this.page = 1
					this.moveList = []
					this.getMovieList(0)
				}
				if (this.index == 2) {
					this.page = 1
					this.cinemaList = []
					this.getCinemaList()
				}
				if (this.index == 3) {
					this.page = 1
					this.moveList = []
					this.getMovieList(1)
				}
			},

			// 搜索
			onSearch() {
				this.page = 1
				this.cinemaList = []
				this.getCinemaList()
			},



			onFilm(e) {
				if(this.index == 1){
					uni.navigateTo({
						url: '/otherpages/film/chooseCinema?id=' + e.filmId + '&time=' + e.publishDate
					})
				}else {
					uni.navigateTo({
						url: `/otherpages/film/film_tom?id=${e.filmId}`
					})
				}
				
			},

			toDetail(e) {
				uni.navigateTo({
					url: '/otherpages/film/Scheduling?id=' + e.cinemaId + '&distanceText=' + e.distanceText
				})
			},

			toCityChoose() {
				uni.navigateTo({
					url:'/otherpages/chooseAddress/loactionList'
				})
			},
			getMovieList(e) {
				this.request.httpTokenRequest({
					url: "/movie/index",
					method: "get"
				}, {
					type: e,
					keyWord: '',
					page: this.page,
					pageSize:10
				}).then(data => {
					if (data.code == 0) {
						this.total = data.data.total
						data.data.filmList.forEach(item => {
							this.moveList.push(item)
						})
					} else {
						this.$util.msg(data.msg)
					}
				}, error => {})
			},
			getCinemaList() {
				this.request.httpTokenRequest({
					url: "/movie/getCinemaList",
					method: "get"
				}, {
					cityCode: this.movieLocation.cityCode || '',
					regionCode: this.movieLocation.regionCode || '',
					keyword: this.keyWord,
					longitude: this.movieLocation.longitude,
					latitude: this.movieLocation.latitude,
					pageIndex: this.page,
					pageSize: 10,
				}).then(data => {
					if (data.code == 0) {
						this.total = data.data.total
						data.data.cinemaList.forEach(item => {
							this.cinemaList.push(item)
						})
						this.keyWord = ''
					} else {
						this.$util.msg(data.msg)
					}
				}, error => {})
			},

			getBanner(){
				this.request.httpTokenRequest({
					url: "/index/getBanner",
					method: "get"
				}, {
					location:5
				}).then(data => {
					if (data.code == 0) {
						this.list = data.data
					} else {
						this.$util.msg(data.msg)
					}
				}, error => {})
			},

		},
		onReachBottom() {
			if (this.index == 2) {
				if (this.cinemaList.length < this.total) {
					this.page++
					this.getCinemaList()
				}
			} else {
				if (this.moveList.length < this.total) {
					this.page++
					this.getMovieList()
				}
			}

		},
		onLoad() {
			this.getBanner()
			this.page = 1
			this.total = 0
			this.moveList = []
			this.cinemaList = []
			if (this.index == 1) {
				this.getMovieList(0)
			}
			if (this.index == 2) {
				this.getCinemaList()
			}
			if (this.index == 3) {
				this.getMovieList(1)
			}
			this.getCinemaList()
		},
		onShow() {
			// movieLocation = this.$store.state.movieLocation
		},
		computed: {
			  ...mapState({'movieLocation':'movieLocation'}),
		}
	}
</script>

<style lang="scss" scoped>
	.nav {
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: calc(var(--status-bar-height) + 10px) 30rpx 0 30rpx;
		height: 90rpx;
		box-sizing: content-box;
		width: calc(100vw - 60rpx);
		background: url(https://qiniu-cdn.maeiyun.com/imgs/indexbg.png) no-repeat 0 0;
		z-index: 99;

		.search-content {
			width: 447rpx;
			display: flex;
			align-items: center;
			background: rgba(255, 255, 255, 0.5);
			border-radius: 32rpx;
			border: 1rpx solid #EF5233;
			backdrop-filter: blur(10px);
			padding: 7rpx 10rpx 7rpx 23rpx;

			image {
				width: 30rpx;
				height: 30rpx;
				flex: 0 0 auto;
				margin-right: 20rpx;
			}

			input {
				width: 40%;
			}

			.input-placeholder {
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #AEAEB0;
			}

			.search-btn {
				width: 103rpx !important;
				height: 50rpx;
				background: #EF5233;
				border-radius: 32rpx;
				backdrop-filter: blur(10px);
				font-size: 26rpx;
				line-height: 50rpx;
				text-align: center;
				color: #fff;
				font-family: PingFangSC, PingFang SC;
				margin-left: auto;
			}
		}

		.icon {
			display: flex;
			align-items: center;

			view {
				display: flex;
				align-items: center;
				flex-direction: column;
				margin-left: 30rpx;

				image {
					width: 22rpx;
					height: 24rpx;
				}

				text {
					font-size: 26rpx;
					color: #333333;
					line-height: 37rpx;
				}
			}
		}
	}

	.film {
		background: url(https://qiniu-cdn.maeiyun.com/imgs/indexbg.png) no-repeat 0 0;
		min-height: 100vh;
		box-sizing: border-box;
		padding: calc(var(--status-bar-height) + 90rpx) 0 0;
		display: flex;
		flex-direction: column;
	}

	.location {
		width: 180rpx;
		height: 64rpx;
		background: rgba(255, 255, 255, 0.7);
		border-radius: 32rpx;
		opacity: 0.71;
		backdrop-filter: blur(10px);
		line-height: 64rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 0 20rpx;

		image {
			width: 22rpx;
			height: 30rpx;
			margin-right: 13rpx;
		}

		view {
			font-size: 28rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #000000;
			line-height: 40rpx;
			flex: 1;
		}
	}

	.tab {
		margin: 39rpx 0 30rpx;
		border-radius: 20rpx;
		background: #FFFFFF;

		.box {
			height: 88rpx;
			display: flex;
			justify-content: space-around;

			view {
				width: 200rpx;
				font-size: 30rpx;
				color: #181818;
				line-height: 88rpx;
				border-bottom: 1rpx solid #FFF;
				background: #FFF;
				text-align: center;
			}

			#select {
				// background: rgba(239, 82, 51, 0.04);
				font-size: 30rpx;
				font-weight: 600;
				color: #EF5233;
			}
		}
		.ad {
			
		}
	
	}

	.film_list {
		margin: 0 30rpx;

		.date {
			padding: 20rpx 32rpx 30rpx;

			text {
				font-size: 20rpx;
				color: #A3A3A3;
				line-height: 28rpx;
			}

			view {
				font-size: 30rpx;
				color: #181818;
				line-height: 42rpx;
			}
		}
	}

	#will {
		background: linear-gradient(90deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
	}

	.cinema_list {
		flex: 1;
		// padding: 25rpx 0 0;
		border-radius: 20rpx;

		.screen {
			padding: 0 30rpx;
			margin-bottom: 25rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.select {
				display: flex;
				align-items: center;

				text {
					font-size: 28rpx;
					color: #333333;
					line-height: 40rpx;
					margin-right: 10rpx;
				}

				image {
					width: 13rpx;
					height: 8rpx;
				}
			}

			.search {
				width: 320rpx;
				height: 60rpx;
				background: #FEF8F6;
				border-radius: 25rpx;
				border: 1rpx solid #F4A797;
				box-sizing: border-box;
				display: flex;
				align-items: center;

				input {
					flex: 1;
					font-size: 24rpx;
					color: #333333;
					height: 100%;
					padding: 0 15rpx;
				}

				.btn {
					width: 80rpx;
					height: 58rpx;
					background: #EE5232;
					border-radius: 20rpx;
					font-size: 22rpx;
					color: #FFFFFF;
					line-height: 58rpx;
					text-align: center;
				}
			}
		}

		.list {
			padding: 0 31rpx;
			background: #FFFFFF;
			.list_item {
				padding: 30rpx 0 28rpx;
				border-bottom: 1rpx solid #DEDEDE;

				.top {
					display: flex;
					align-items: center;
					justify-content: space-between;

					view {
						font-size: 30rpx;
						font-weight: 600;
						color: #0F0807;
						line-height: 42rpx;
						height: 42rpx;
						max-width: 70%;
					}

					text {
						font-size: 22rpx;
						color: #888889;
						line-height: 30rpx;

						i {
							color: #EE5232;
							font-style: normal;
						}
					}
				}

				.bottom {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 12rpx;

					view {
						font-size: 22rpx;
						color: #888889;
						line-height: 30rpx;
						max-width: 70%;
					}

					text {
						font-size: 22rpx;
						color: #888889;
						line-height: 30rpx;
					}
				}
			}
		}
	}

	.item {
		margin-bottom: 30rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx 30rpx 30rpx 31rpx;
		display: flex;
		justify-content: space-between;

		image {
			width: 160rpx;
			height: 214rpx;
		}

		.btn {
			padding-top: 42rpx;
			box-sizing: border-box;
			height: 214rpx;

			view {
				width: 90rpx;
				height: 44rpx;
				background: linear-gradient(90deg, #EF5233 0%, #FFB554 100%);
				border-radius: 22rpx;
				font-size: 22rpx;
				line-height: 44rpx;
				text-align: center;
				color: #FFF;
			}
		}

		.substance {
			max-width: 50%;

			.name {
				font-size: 30rpx;
				color: #0F0807;
				line-height: 42rpx;
				font-weight: 600;
			}

			.text {
				width: 100%;
				font-size: 22rpx;
				color: #888889;
				line-height: 30rpx;
				margin-top: 12rpx;
				display: flex;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;

				i {
					font-size: 24rpx;
					font-weight: 600;
					color: #EF5233;
					line-height: 33rpx;
					margin: 0 10rpx;
					font-style: normal;
				}

				.line {
					width: 1rpx;
					height: 23rpx;
					background: rgba(151, 151, 151, 0.4);
					margin-right: 10rpx;
				}
			}
		}
	}
</style>